<template>
  <div class="credits">
    <p class="title">工作台/积分提现管理</p>
    <div class="credits-content">
      <!-- 未结账积分 -->
      <div class="account-en-route">
        <div class="title">未结账积分</div>
        <ul class="route-list">
          <!-- <li>
            <p>名称：三星机油</p>
            <p>积分数：200分</p>
            <p>金额数：200元</p>
            <p>手机号：15811112525</p>
            <p><el-button type="primary">结账</el-button></p>
          </li> -->
          <li v-for="(item, index) in integralData" :key="index" :curIndex='curIndex'>
            <p>名称：{{ item.product }}</p>
            <p>积分数：{{ item.integral }}分</p>
            <p>金额数：{{ item.total }}元</p>
            <p>手机号：{{ item.tel }}</p>
            <p>
              <el-button  type="primary" @click="settleAccounts(index, item)"
                >结账</el-button
              > 
            </p>
          </li>
        </ul>
      </div>
      <!-- 已结账积分 -->
      <div class="closed-account">
        <div class="title">已结账积分</div>
        <!-- 查询 -->
        <div class="search">
          <el-input v-model="input1" placeholder="输入名称查询"></el-input>
          <el-input v-model="input2" placeholder="输入结账日期查询"></el-input>
          <el-input
            placeholder="输入处理人查询"
            suffix-icon="el-icon-date"
            v-model="input3"
          >
          </el-input>
          <el-button type="primary" @click="integralSearch">查询</el-button>
        </div>
        <!-- 统计 -->
        <div class="count">
          <span>总计：{{ countIntegral }}</span
          ><span>总数:{{ countIntegral }}</span>

          <el-table :data="tableData" border style="width: 80%">
            <el-table-column prop="id" label="编号" width=""> </el-table-column>
            <el-table-column prop="uname" label="名称" width="">
            </el-table-column>
            <el-table-column prop="account" label="积分数"> </el-table-column>
            <el-table-column prop="total" label="金额数" width="">
            </el-table-column>
            <el-table-column prop="tel" label="手机号" width="">
            </el-table-column>
            <el-table-column prop="time" label="结账日期" width="">
            </el-table-column>
            <el-table-column prop="auditor" label="处理人" width="">
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            layout="prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import api from "../api";
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      total: 100, //分页
      curIndex:'',
      integralData: [
        {
          product:'机油',
          integral:200,
          total:200,
          tel:12345678911
        },
         {
          product:'机油',
          integral:200,
          total:200,
          tel:12345678911
        }
      ], //未结账积分
      countIntegral: 0, //总积分
      tableData: [],
    };
  },
  mounted() {
    // this.http("lili");
    // this.http1();
  },

  methods: {
    //已结账列表
    // http1() {
    //   api.integralDetail().then((res) => {
    //     console.log(res.data);
    //     this.tableData = res.data.result;
    //   });
    // },

    //未结账
    // http(uname) {
    //   api
    //     .integralAccount({
    //       uname: uname,
    //     })
    //     .then((res) => {
    //       console.log(res.data);
    //       if (res.data.status == 200) {
    //         this.integralData = res.data.result;
    //       }
    //     });
    // },
    //分页
    handleCurrentChange(val) {
      console.log(val);
    },
    //模糊查询
    integralSearch() {
      // let search = this.input1 || this.input2 || this.input3;
      // api.integralSearch({ search }).then((res) => {
      //   //console.log(res.data);
      //   if (res.status == 200) {
      //     this.tableData = res.data.result;
      //   }
      // });
    },
    //结账
    settleAccounts(index, item) {
      // api
      //   .integralUpdate({
      //     id: index,
      //     uname: item.uname,
      //     integral: item.integral,
      //     total: item.integral,
      //     tel: item.tel,
      //     time: item.time,
      //     auditor: item.auditor,
      //   })
      //   .then((res) => {
      //     console.log(res.data);
      //     this.http1();
      //   });
    },
  },
};
</script>

<style scoped lang='less'>
.credits {
  margin-left: 200px;
  width: 1600px;
  padding-top: 10px;
  box-sizing: border-box;

  .title {
    text-align: left;
    font-size: 14px;
  }
  .credits-content {
    width: 100%;
    background: #eeeeee;
    height: 1000px;
    margin-top: 10px;
    .account-en-route {
      height: 360px;
      .title {
        height: 55px;
        padding-left: 30px;
        box-sizing: border-box;
        line-height: 55px;
        background: #cccccc;
        font-size: 16px;
      }
      .route-list {
        margin: 25px 40px;
        li {
          width: 215px;
          height: 252px;
          border: 1px solid #bbbbbb;
          float: left;
          margin-right: 85px;
          background: white;
          font-size: 14px;
          p {
            margin: 25px auto;
          }
        }
      }
    }
    .closed-account {
      height: 360px;
      .title {
        height: 55px;
        padding-left: 30px;
        box-sizing: border-box;
        line-height: 55px;
        background: #cccccc;
        font-size: 16px;
      }
      .count {
        padding: 20px 40px;
        text-align: left;
        span {
          margin-right: 100px;
        }
        .el-table {
          margin-top: 50px;
          margin-bottom: 100px;
        }
      }
      .search {
        height: 75px;
        border-bottom: 1px solid #bbbbbb;
        text-align: left;
        line-height: 75px;
        padding-left: 40px;
        box-sizing: border-box;
        .el-input {
          width: 200px;
          height: 25px;
          margin-right: 40px;
        }
      }
    }
  }
}
</style>
